<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
        .wrong {
            border: 2px solid red;
        }
        .right {
            border: 2px solid #91B81D;
        }
        .fs{
        	color: red;
        	margin: 15px;
        	display: none 
        	
        }
        .show{
        	color: red;
        	margin: 0px 0px;
        	display: inline-block;
        	
        }
        .disappe{
        	display: none;
        	
        }
    </style>
	</head>
	<body>
		    账号：<input type="text" /><span class="fs">长度不符合要求</span><br><br>
    密码：<input type="password"/>
	</body>
	<script>
	//需求：失去焦点的时候判断input按钮中的值，如果账号或密码在6-12个字符之间通过，否则报错。
		var inp1=document.getElementsByTagName("input")[0];
		var sp=document.getElementsByTagName("span")[0];
   		inp1.onblur=function(){
   			if(this.value!=""){
   				if(this.value.length<6||this.value.length>12){
   					this.className="wrong";
   					sp.className="show"
   				}else{
   					this.className="right"
   					sp.className="disappe"
   				}
   			}
   		}
	</script>
	
</html>
